<template>
    <div>
		<div class="topToolBar">
			<a-button type="primary" icon="plus" @click="showAddNew">新增</a-button>
		</div>

		<a-table
      bordered
      :data-source="tbMainData"
      :row-key="record => record.id"
      :columns="tbMainHead"
      :customRow="rowClick"
      :pagination="pagination">
		</a-table>

		<a-drawer
      title="编辑"
      width="80%"
      destroyOnClose
      :visible="isDrawerShow"
      @close="isDrawerShow=false">

      <a-form-model
        ref="checkForm"
        :model="formData"
        :rules="formRule">
        <a-row
          type="flex"
          justify="space-between" >
          <a-col>
            <a-form-model-item
              label="名称"
              prop="name">
            	<a-input v-model="formData.name" placeholder="请输入名称"/>
            </a-form-model-item>
          </a-col>
          <a-col>
            <a-form-model-item label="时间" prop="date" >
              <a-date-picker show-time  v-model="formData.date" placeholder="请选择时间"/>
            </a-form-model-item>
          </a-col>
          <a-col>
            <a-form-model-item
              label="有效期"
              prop="validPeriod">
              <a-input v-model="formData.validPeriod" placeholder="请输入有效期"/>
            </a-form-model-item>
          </a-col>
        </a-row>
		    <a-col>
            <a-form-model-item
              label="备注" >
                <a-textarea v-model="formData.remarks" placeholder="请输入备注" :rows="4" />
            </a-form-model-item>
        </a-col>
		</a-form-model>
      <div class="drawerFoot">
				<div class="footFixedArea">
					<a-button @click="isDrawerShow=false">
						取消
					</a-button>
					<a-button
            type="primary"
            @click="submitData(formData)">
						提交
					</a-button>
				</div>
			</div>
		</a-drawer>
	</div>
</template>

<script>
	let tbMainHead = [{
			title: '序号',
			dataIndex: 'id'
		},
		{
			title: '时间',
      dataIndex: 'date'
		},
		{
			title: '名称',
			dataIndex: 'name'
        },
		{
			title: '有效期/天',
			dataIndex: 'validPeriod'
		},
		{
			title: '备注',
			dataIndex: 'remarks'
		}
	];
  let formRule={
					date: [{
							required: true,
							message: '请选择时间',
							trigger: 'blur'
						}],
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
                    }],
          validPeriod: [{
							required: true,
							message: '请输入有效期',
							trigger: 'blur'
						}]
  };
  let pagination={
  };
	export default {
		data() {
			return {
				tbMainData: [],
        tbMainHead,
        pagination,
				isDrawerShow: false,
				formData: {},
        formRule
			}
		},
		mounted() {
      //请求授权表格数据
			this.$http.axios.post('AuthDetailListData').then((response)=>{
        response.data.array.forEach((item)=>{
          this.tbMainData.push(item);
        })
      }).catch((error)=>{
        this.$global.toast(error);
      });
		},
		methods: {
			submitData(data) {
				this.$refs.checkForm.validate(valid => {
					if (valid) {
            if(typeof(data.date)!='string'){
              data.date = data.date.format('YYYY-MM-DD hh:mm:ss');
            }
            if(this.tbMainData.filter(d=>d.id===data.id).length>0){
              this.tbMainData.splice(data.id-1,1,data);
            }else{
              this.tbMainData.push(
                            {
                                id:this.tbMainData.length+1,
                                date:data.date,
                                name:data.name,
                                validPeriod:data.validPeriod,
                                remarks:data.remarks
                            });
            }
            this.isDrawerShow=false;
					} else {
						this.$global.toast('提交失败');
					}
				});
			},
			showAddNew() {
				this.formData = {};
				this.isDrawerShow = true;
			},
			rowClick(record, index) {
				return {
					on: {
						click: () => {
							this.formData = record;
							this.isDrawerShow = true;
						}
					}
				}
			}
		}
	}
</script>
